<template>
  <div class="container containermain bg-white">
    <div class="row header">
      <header class="col">我的通知</header>
    </div>
    <hr />
    <div class="row">
      <div class="col">
        <ul class="list-group list-group-flush">
          <li
            v-for="(v, i) in tableDate"
            :key="i"
            class="text-x list-group-item d-flex justify-content-between align-items-center"
          >
            <div class="list-group-item-1" @click="click(v)" :class="v.issee ? 'text-muted' : ''">
              <el-badge is-dot v-show="!v.issee" type="danger" class="el-badge-item"></el-badge>
              <a :href="v.notice.description" target="_bank" class="stretched-link">
                {{
                  v.notice.name
                }}
              </a>
            </div>
            <span class="badge-pill">{{ new Date(v.createdAt).toLocaleDateString() }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col text-right">
        <el-pagination
          :page-size="limit"
          :total="count"
          @current-change="change"
          layout="prev, pager, next"
          :current-page="Math.floor(offset / limit) + 1"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { toLocaleDateString } from "../../../util/time";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { asyncgetmynotice, asyncchangemynotice } from "../../../api";
type D = {
  tableDate: Studycodemodel.Inotice[];
  count: number;
};
export default defineComponent({
  name: "Articleindex",
  data() {
    return {
      tableDate: [],
      count: 0,
    } as D;
  },
  computed: {
    offset(): number {
      return Number(this.roue.offset) || 0;
    },
    limit(): number {
      return Number(this.roue.limit) || 20;
    },
    roue() {
      const { $route } = this;
      return $route.query as unknown as {
        offset: number;
        limit: number;
      };
    },
  },
  created() {
    this.start();
  },
  watch: {
    offset() {
      this.start();
    },
    limit() {
      this.start();
    },
  },
  methods: {
    async start() {
      const { offset = 0, limit = 20 } = this;
      const data = await asyncgetmynotice({
        _offset: offset,
        _limit: limit,
      });
      this.tableDate = data.rows;
      this.count = data.count;
    },
    toLocaleDateString,
    change(r: number) {
      const { limit } = this;
      this.$router.push({
        name: "我的通知",
        query: {
          limit,
          offset: (r - 1) * limit,
        },
      });
    },
    async click(v: Studycodemodel.Iusernotice) {
      if (v.ID && v.issee === false) {
        await asyncchangemynotice({ ID: v.ID });
        await this.start();
      }
    },
  },
});
</script>

<style scoped>
.text-x {
  font-size: 15px;
}
.list-group-item {
  border: none;
}
.list-group-flush {
  font-size: 15px;
}
.header {
  padding: 20px 17px;
  font-size: 22px;
  line-height: 28px;
}
.time {
  font-size: 13px;
  color: rgba(50, 50, 93, 0.352941176470588);
}
.containermain {
  margin-bottom: 20px;
  padding: 20px;
}
.stretched-link {
  color: inherit;
  text-decoration: none;
}
.list-group-item-1 {
  list-style-type: armenian;
}
.el-badge-item {
  top: 4px;
  left: -10px;
  width: 0px;
}
</style>
